<template>
  <div>
    <div class="headAddCon" @click="handleAdd">
      <div>
        <i class="el-icon-circle-plus-outline"></i>{{ tableColumnType | Name }}
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <template v-for="item in tableColumFn">
        <el-table-column :key="item" :prop="item.prop" :label="item.label">
          <template v-solt="scope">
            <template v-if="item.format == 'handleRow'">
              <div>
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </div>
            </template>
            <template v-else>
              {{ scope.rows }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <v-pagination
      :dataTotal="dataTotal"
      :curPage="curPage"
      :pageSize="pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination>
  </div>
</template>

<script>
import {
  switchtableColums,
  servertableColums,
  SANswitchtableColums,
  storagetableColums,
} from "./DeviceMangItemColumns";
import vPagination from "common/Pagination.vue";
export default {
  props: ["tableData", "tableColumnType", "dataTotal", "curPage", "pageSize"],
  components: {
    vPagination,
  },
  filters: {
    Name: function(value) {
      let Name = {
        switch: "新增交换机",
        server: "新增服务器",
        SANswitch: "新增SAN交换机",
        storage: "新增存储",
      };
      return Name[value];
    },
  },
  computed: {
    tableColumFn() {
      let Type = {
        switch: switchtableColums,
        server: servertableColums,
        SANswitch: SANswitchtableColums,
        storage: storagetableColums,
      };
      return Type[this.tableColumnType];
    },
  },
  data() {
    return {};
  },
  methods: {
    handleAdd(){
      this.$emit('openDialog',this.tableColumnType)
    },
    getPaginationCurPage(value) {
      this.$emit("getPaginationCurPage", value);
    },
    getPaginationPageSize(value) {
      this.$emit("getPaginationPageSize", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.headAddCon {
  display: grid;
  justify-content: center;
  align-content: center;
  background: #30a89c;
  color: #fff;
  min-height: 40px;
  margin-bottom: 15px;
  cursor: pointer;
  border-radius: 3px;
  
}
</style>
